(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的提問

認識React

React是由Facebook推出的前端框架。由於使用了特殊的「JSX語法」，React最被人推崇的就是可以對元素進行Javascript的邏輯運算。我們會在後面的教學中深入理解這個部份。

自製元件

在React中，我們可以讓自己製作的元件模組化，並以和過去使用網頁基礎元素一樣的方式使用。後來這項特性也被另外兩大框架Vue、Angular導入。

2019年以前的React - Class Component

在2019年以前，React極度仰賴ES6的class語法。雖然class繼承的特性讓React擁有強大的各項功能，但也產生了以下兩個重要的問題:

1. 學習成本高，對新手不友善。

要會React，你除了JSX要學、還要會ES6的class、還要懂繼承、還要知道class當中的各個scope和作用域的關係......

如果你沒學過ES6的class，看到下面這段程式碼一定很崩潰:

import React, { Component } from 'react';
import './css/icon.css'


class Icon extends Component {
    constructor(props) {
        super(props)
      }
     render() {
        const outsideColor=(this.props.isWhite)?"white":"#cc3d61";
        const insideColor=(this.props.isWhite)?"rgba(255,255,255,0.6)":"#cc3d61";
        return (
            <div className="lds-css-ng-scope" style={this.props.style}>
                <div style={{width:"100%",height:"100%"}} className="lds-ripple">
                    <div style={{borderColor:outsideColor}}></div>
                    <div style={{borderColor:insideColor}}></div>
                </div>
            </div>
        );
      }
    }

export default Icon;

2. class component很笨重

由於要用class的繼承特性去承接React寫好的功能，當要使用React的特有功能時，大部份的時候都要做一個元件出來。但有的時候我們並不是要創造元件，而只是要使用React的一兩個特性，卻沒辦法用更直覺、簡單的模組化方式。 又或著只是一個很簡單的元件，卻因為要Follow ES6 class的語法而讓架構看起來很複雜。

2019年以後的React與Hook - Function Component

為了解決這個問題，在2019年，React推出了React hook。其原理可以想像成是生出一個外部的邏輯處理中心，是把React的功能拉到裡面處理。當我們要在函式產生的元件使用React component API時，會在創造元件的那一瞬間，依照順序給每一個使用的React component API一個編號，之後只要去比對在邏輯處理中心的編號，就知道現在要用的component API邏輯是屬於誰的了。

這樣的概念就像是「元件用鉤子勾在邏輯中心的固定位置」，所以稱為Hook。

React hook推出後風靡了整個社群，它讓元件不再笨重，可以用簡易的函式來創造元件、更直覺的模組化React特性。 這樣的狀況甚至影響了Vue。 2020年9月Vue 3.0 Release正式推出，如果你在學習完本系列後跑去看Vue 3.0，你會發現他看起來超像是「沒有JSX的React」。

這個系列要教你什麼 ?

我們會講解在目前在業界工作一定會用到的React hook語法，以及為什麼會需要用這些hook。class component目前正在被社群慢慢拋棄中，有需求的朋友可以參考我去年的鐵人賽文章。